<template>
    <div class='main_panel' >
      <div v-if="showTitle" class="main_panel_title">
        <span  class="right-icon">
          <router-link v-touch-ripple :to="fullHref"><img :src="full_screen" alt="dayhr" @click="emit('full-click')"></router-link>
        </span>
        <slot name='title'>Hello</slot>
      </div>
      <slot name='content'>585</slot>
    </div>
</template>
<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
  @import "../../assets/css/variable";
  .main_panel{
    border-radius: 4px;
    width: 100%;
    min-height: calc(100% - 42px);
    border: 1px #c9c9c9 solid;
    box-shadow: -1px 0px 10px 2px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: relative;
    margin-bottom: 40px;
    .main_panel_title{
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      border-radius: 4px 4px 0 0;
      border-bottom: 1px #c9c9c9 solid;
      background: -webkit-linear-gradient(top, #f9f9f9 , #eaeaea); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(top,#f9f9f9 , #eaeaea); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(top, #f9f9f9 , #eaeaea); /* Firefox 3.6 - 15 */
      background: linear-gradient(to top, #f9f9f9 , #eaeaea); /* 标准的语法 */
      font-size: 18px;
      .right-icon{
        float: right;
        &:active,&:hover{
          cursor: pointer;
          opacity: .5;
        }
      }
      .left{
        float: left;
      }
    }
    &:before{
      content: '';
      position: absolute;
      bottom: -3px;
      left:2px;
      right:2px;
      height: 1px;
      background-color: #c9c9c9;
    }
    &:after{
      content: '';
      position: absolute;
      bottom: -5px;
      left:4px;
      right:4px;
      height: 1px;
      background-color: #c9c9c9;
    }
  }
</style>
<script>
  import full_screen from '../../assets/images/full_screen.png'
    export default{
        name:'panel',
        data:function () {
          return{
            full_screen
          }
        },
        props:{
          showTitle:{
            type:Boolean,
            default:true
          },
          fullHref:{
            type:String,
            default:'javascript:void(0)'
          }

        }
    }
</script>
